extends /templates/base-flat

block page_nav
  include ./teacher-dashboard-nav.jade

block content
  if (!me.isTeacher() && !me.isAdmin() && !view.classrooms.size()) || me.isAnonymous()
    .access-restricted.container.text-center.m-y-3
      h5(data-i18n='teacher.access_restricted')
      p(data-i18n='teacher.teacher_account_required')
      if me.isAnonymous()
        .login-button.btn.btn-lg.btn-primary(data-i18n='login.log_in')
        button.btn.btn-lg.btn-primary-alt.create-teacher-btn(data-event-action="Teachers Classes Create Teacher Account", data-i18n='teacher.create_teacher_account')
      else
        button.btn.btn-lg.btn-primary.update-teacher-btn(data-event-action="Teachers Classes Convert Teacher Account", data-i18n="teachers_quote.convert_account_title")
        button#logout-button.btn.btn-lg.btn-primary-alt(data-i18n="login.log_out")

    .container
      .teacher-account-blurb.text-center.col-xs-6.col-xs-offset-3.m-y-3
        h5(data-i18n='teacher.what_is_a_teacher_account')
        p(data-i18n='teacher.teacher_account_explanation')

  else
    if !me.isTeacher() && !me.isAdmin()
      .alert.alert-danger.text-center
        .container
          // DNT: Temporary
          h3 ATTENTION: Please upgrade your account to a Teacher Account.
          p
            | We are transitioning to a new improved classroom management system for instructors.
            | Please convert your account to ensure you retain access to your classrooms.
          button.btn.btn-primary.btn-lg.update-teacher-btn(data-event-action="Teachers Classes Convert Teacher Account Temp") Upgrade to teacher account



    .container
      +teacher-quests

    //- TODO: above or below teacher quests?
    .container
      div#classes-nag-subview

      h3(data-i18n='teacher.current_classes')

    .classes.container
      // Loop each class
      each classroom in view.classrooms.models
        unless classroom.get('archived')
          +classRow(classroom)

    +createClassButton

  - var archivedClassrooms = view.classrooms.where({archived: true});
  if _.size(archivedClassrooms)
    .container
      h3(data-i18n='teacher.archived_classes')
      p(data-i18n='teacher.archived_classes_blurb')

    .classes.container
      each classroom in archivedClassrooms
        +archivedClassRow(classroom)

mixin classRow(classroom)
  .class.row
    .class-details-col
      .text-h4.semibold
        = classroom.get('name')
      .language.small
        span(data-i18n='teacher.language')
        | :&nbsp;
        span.language-name
          = classroom.capitalLanguage
      .student-count.small
        span(data-i18n='courses.students')
        | :&nbsp;
        span
          = classroom.get('members').length
      .class-links
        a.view-class-btn.text-h6(data-i18n='teacher.view_class' data-classroom-id=classroom.id data-event-action="Teachers Classes View Class Link")
        a.edit-classroom.text-h6(data-i18n='teacher.edit_class_settings' data-classroom-id=classroom.id data-event-action="Teachers Classes Edit Class Started")
        a.archive-classroom.text-h6(data-i18n='teacher.archive_class' data-classroom-id=classroom.id data-event-action="Teachers Classes Archive Class")

    .flex-right
      .progress-col
        if classroom.get('members').length == 0
          +addStudentsButton(classroom)
        else
          - var courses = classroom.getSortedCourses().map(function(c) { return view.courses.get(c._id); });
          - var courseLabelsArray = view.helper.courseLabelsArray(courses);
          each trimCourse, index in classroom.getSortedCourses() || []
            - var course = view.courses.get(trimCourse._id);
            - var label = courseLabelsArray[index];
            +progressDot(classroom, course, label)
      .view-class-arrow
        a.view-class-arrow-inner.glyphicon.glyphicon-chevron-right.view-class-btn(data-classroom-id=classroom.id data-event-action="Teachers Classes View Class Chevron")


mixin addStudentsButton(classroom)
  .add-students
    .text-center
      div.small-details(data-i18n='teacher.no_students_yet_view_class')

mixin createClassButton
  .create-class
    .text-center
      a.create-classroom-btn.btn.btn-lg.btn-primary(data-i18n='teacher.create_new_class')

mixin progressDot(classroom, course, label)
  //- TODO: inefficient. Cache this in the view?
  - courseInstance = view.courseInstances.findWhere({ courseID: course.id, classroomID: classroom.id })
  - var total = classroom.get('members').length
  - var complete = 0;
  - var dotClass = '';
  - var started = 0;
  if courseInstance && !_.isEmpty(courseInstance.get('members'))
    - complete = courseInstance.numCompleted
    - started = courseInstance.started
    - dotClass = complete === total ? 'forest' : started ? 'gold' : '';
    - var progressDotContext = {total: total, complete: complete};
    .progress-dot(class=dotClass, data-title=view.progressDotTemplate(progressDotContext))
      +progressDotLabel(label)

mixin progressDotLabel(label)
  .dot-label.text-h6= label

mixin archivedClassRow(classroom)
  .class.row
    .col-xs-10
      span
        = classroom.get('name')
    .col-xs-2
      .class-links.pull-right
        a.unarchive-classroom.text-h6(data-i18n='teacher.unarchive_class' data-classroom-id=classroom.id)

mixin teacher-quests
  - var lastComplete = null;
  - var nextIncomplete = null;
  - var numComplete = 0;
  - var totalQuests = 0;
  each quest in view.teacherQuestData
    - totalQuests++;
    if quest.complete
      - lastComplete = quest;
      - numComplete++;
    else if !nextIncomplete
      - nextIncomplete = quest;
  if lastComplete
    - lastComplete.lastComplete = true;
  if nextIncomplete
    - nextIncomplete.nextIncomplete = true;
  - var percentComplete = totalQuests ? Math.round(numComplete * 100.0 / totalQuests) : 0;
  if view.prepaids.length < 1
    .teacher-quests
      .row
        .col-sm-3.quests-summary-col
          .quest-progress.center #{percentComplete}%
          .center
            if numComplete != totalQuests
              .el
                - var height = 100;
                svg(width=height, height=height)
                  - var radius = height / 2;
                  - var fullCircleStroke = 2*Math.PI*radius / 2
                  circle.bottom(r=radius,cx=radius,cy=radius)
                  circle.top(r=radius / 2,cx=radius,cy=radius,style="stroke-dasharray: #{fullCircleStroke/100*percentComplete} #{fullCircleStroke}")
          .center.completion-label(data-i18n="teacher.quests_complete")
        .col-sm-9.quests-list-col
          if numComplete != totalQuests
            h3(data-i18n="teacher.teacher_quest")
            strong.center!= view.translateWithMarkdown('teacher.teacher_quest_keep_going')
          else
            br
            strong.center!= view.translateWithMarkdown('teacher.teacher_quest_done')
          ul
            each quest in view.teacherQuestData
              if quest.complete
                if quest.lastComplete && numComplete != totalQuests
                  li.quest.quest-complete
                    +teacherQuest(quest,true)
                else
                  li.quest.quest-complete.hide
                    +teacherQuest(quest,true)
              else
                if quest.nextIncomplete
                  li.quest.quest-incomplete
                    +teacherQuest(quest,false)
                else
                  li.quest.quest-incomplete.hide
                    +teacherQuest(quest,false)
          .div
            span(data-i18n="teacher.refresh_to_update").refresh-help
            a.see-all-quests.btn.btn-primary.btn-small.pull-right(data-i18n="teacher.teacher_quest_more")
            a.see-less-quests.btn.btn-small.btn-primary.pull-right(data-i18n="teacher.teacher_quest_less" style="display: none")

mixin teacherQuest(quest,check)
  div.quest-title
    if check
      span.glyphicon.glyphicon-check 
    else
      span.glyphicon.glyphicon-unchecked
    span !{quest.title}
  //[!{Math.floor(quest.best*100)}%]
  if (quest.steps || []).length > 0
    ul
      each step in quest.steps || []
        li
          if check
            span.glyphicon.glyphicon-check 
          else
            span.glyphicon.glyphicon-unchecked 
          span !{step}

